<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8"/>
        <title>2何为数据代理</title>
        <script type="text/javascript" src="../js/vue.js"></script>
        <!-- shortcut icon”这样做的结果是所有浏览器都可以理解此代码。只有当希望为新浏览器提供另一种备用图像,才有必要添加第二行使用icon -->
        <link rel ="shortcut icon" type="image/x-icon" href="../static/vue.jpg">
    </head>

    <body>
        <!-- 数据代理：通过一个对象代理对另一个对象中属性的操作(读/写) -->
        <script type="text/javascript">
            Vue.config.productionTip = false //阻止Vue在启动时生成生产提示
            
            let obj1 = {x:100}
            let obj2 = {y:200}

            Object.defineProperty(obj2 , 'x' , {
                get(){
                    return obj1.x
                },
                set(value){
                    obj1.x = value
                }
            })
            
        </script>
    </body>
</html>